<template>
   <el-container class="content">
       <div class="content_wrap" >
       <el-steps :space="200" :active="activeName" finish-status="success" simple>
            <el-step title="邮箱验证">
               
            </el-step>
            <el-step title="密码修改">
              
            </el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <div class="regView">
           
            
            <avue-login v-if="activeName==0" v-model="form" :option="option2" @submit="submit" @send="send"></avue-login>
            <el-form v-if="activeName==1" :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="密码" prop="password">
                  <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                  <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">修改密码</el-button>
                  
                </el-form-item>
            </el-form>
            <span v-if="activeName==2"> 恭喜你修改成功，3s后跳转</span>
        </div>
       </div>
   </el-container>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class UpdatePass extends Vue{
    activeName=0

    form={
       password:"",
       checkPass:"",
       email:""
    }
    isCode=false
    option2={
        width: 400,
        time: 60,
        codeType: 'phone',
        column: {
          username: {
            label: '邮箱',
            prop:"email",
            prefixIcon: 'el-icon-mobile-phone',
            placeholder: '邮箱',
            autocomplete: 'off',
            rules: [{required: true, message: '请输验证码', trigger: 'blur'},
                  {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ]
          },
          password: {
            hide: true,
          },
          code: {
            label: '验证码',
            prop:"code",
            autocomplete: 'off',
            rules: { required: true, message: '请输验证码', trigger: 'blur' }
          }
        }
      }
     validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
         
          callback();
        }
      }
      validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
    }
    rules= {
          password: [
            { validator: this.validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: this.validatePass2, trigger: 'blur' }
          ]
    }
    
    async submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
             
         
            var url=`auth/updatePass/`+this.form.email
         
            const res=await this.$httpajax.put(url,{
                password:this.form.password
             })
            if(res.data.statusCode==200){
              this.activeName=2
              setTimeout(()=>{

                  this.$router.push("/")
               },3000)
            }
            //const res=await this.$httpajax.post("auth",this.form)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  

    async send(done,form) {
      //const res=await this.$httpajax.get("code/CreateCode") 
    
     
      if(!this.isCode){
        await this.$httpajax.get("code/CreateCode/"+$(".el-input__inner").eq(0).val()) 
        this.$message.success('验证码发送成功')
        this.isCode=true
        
        setTimeout(()=>{
          this.isCode=false
        },60000)
        done();
      }
    }
    async submit(form) {
      
       const res=await this.$httpajax.get("code/CheckCode/"+form.code) 
       console.log(res)
       if(res.data.statucode==200&&res.data.isSame){//&&res.isSame
           
               this.form.email=form.email
               this.activeName=1
               

       }else{
          this.$message.warning("验证码不正确")
       }
    }
}
</script>
<style lang='less' scoped>
@AvatarWidth:100px;
.content{
    display:flex; 
    min-width:1200px;
    justify-content: center;
    .content_wrap{
        width:60%;
        margin-top:5%;
        .regView{
            width:50%;
            margin-top:5%;
            margin-left:20%;
           
            .avatar-uploader{
                width: @AvatarWidth;
                height: @AvatarWidth;
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                &:hover {
                    border-color: #409EFF;
                }
            }
      
            

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: @AvatarWidth;
                height: @AvatarWidth;
                line-height: @AvatarWidth;
                text-align: center;
            }
            .avatar {
                width: @AvatarWidth;
                height: @AvatarWidth;
                display: block;
            }
        }

        
    }
}
</style>